<script setup>

import {getCurrentInstance, ref, watch} from "vue";
import {useRouter} from "vue-router";
import {getSysJob} from "@/api/monitor/sys_job";
import {jobExecuteStatusList, jobGroupStatusList, jobStatusList} from "@/enum/enum";
import {enumToArray} from "@/utils/utils";
import {clearSysJobLog, deleteSysJobLog, listSysJobLog} from "@/api/monitor/sys_job_log";
import DictTag from "@/components/DictTag/index.vue";
import SysJobLogDetailForm from "@/views/monitor/task_log/SysJobLogDetailForm.vue";

const {proxy} = getCurrentInstance();
const router = useRouter()
const jobId = ref();
const sysJobLogList = ref([]);
const total = ref(0);
const ids = ref([])
const queryFormRef = ref();
const sysJobLogDetailFormRef = ref();
const queryForm = ref({
  pageNo: 1,
  pageSize: 10,
  jobName: null,
  jobGroup: null,
  status: null,
  timeArr: null,
})

const getList = async () => {
  const {data} = await listSysJobLog(queryForm.value);
  total.value = data.total;
  sysJobLogList.value = data.list;
}

const getJobInfo = async () => {
  const {data} = await getSysJob(jobId.value);
  queryForm.value.jobName = data.jobName;
  queryForm.value.jobGroup = data.jobGroup;
  await getList();
}

const handleQuery = () => {
  queryForm.value.pageNo = 1;
  getList();
}

const handleReset = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.jobLogId);
}

const handleDelete = () => {
  const jobLogIds = ids.value;
  proxy.$modal.confirm(`确定删除选中的任务调度日志吗？`).then(async () => {
    await deleteSysJobLog(jobLogIds);
    proxy.$modal.okNotify('删除成功');
    await getList();
  })
}

const handleClear = () =>{
  proxy.$modal.confirm(`确定清空任务调度日志吗？`).then(async () => {
    await clearSysJobLog();
    proxy.$modal.okNotify('清空成功');
    await getList();
  })
}


const handleDetail = (row) => {
  sysJobLogDetailFormRef.value.open(row.jobLogId);
}

watch(() => router.currentRoute.value.path, async (toPath) => {
  const query = router.currentRoute.value.query;
  queryFormRef.value?.resetFields();
  if (query.jobId !== undefined && query.jobId != 0) {
    jobId.value = query.jobId;
    await getJobInfo();
  } else {
    await getList();
  }
}, {immediate: true, deep: true})
</script>

<template>
  <div class="app-container">

    <el-form :model="queryForm" ref="queryFormRef" :inline="true" class="demo-form-inline">
      <el-form-item label="任务名称" prop="jobName">
        <el-input v-model="queryForm.jobName" placeholder="请输入任务名称"/>
      </el-form-item>
      <el-form-item label="任务组名" prop="jobGroup">
        <el-select v-model="queryForm.jobGroup" placeholder="请选择任务组名">
          <el-option v-for="(item, index) in jobGroupStatusList" :key="index" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="任务状态" prop="status">
        <el-select v-model="queryForm.status" placeholder="请选择任务状态">
          <el-option v-for="(item, index) in jobStatusList" :key="index" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="执行时间" prop="timeArr">
        <el-date-picker
            v-model="queryForm.timeArr"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">
          <icon icon="ep-search" size="14px" color="unset" class="mr-1"/>
          查询
        </el-button>
        <el-button plain @click="handleReset">
          <icon icon="ep-refresh" size="14px" color="unset" class="mr-1"/>
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <div class="flex mb-5">
      <el-button size="default" type="danger" plain :disabled="!ids.length" class="flex items-center" @click="handleDelete" v-hasPermission="['system:task_log:delete']">
        <icon icon="ep-delete" size="14px" color="unset" class="mr-1"/>
        删除
      </el-button>
      <el-button size="default" type="danger" plain class="flex items-center" @click="handleClear" v-hasPermission="['system:task_log:clear']">
        <icon icon="ep-delete" size="14px" color="unset" class="mr-1"/>
        清空
      </el-button>
    </div>

    <el-table :data="sysJobLogList" :border="true" size="large" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="jobLogId" label="日志编号"/>
      <el-table-column prop="jobName" label="任务名称"/>
      <el-table-column prop="jobGroup" label="任务组名">
        <template #default="scope">
          <dict-tag :options="enumToArray(jobGroupStatusList)" :value="scope.row.jobGroup"/>
        </template>
      </el-table-column>
      <el-table-column prop="invokeTarget" label="调用目标字符串" show-overflow-tooltip/>
      <el-table-column prop="jobMessage" label="日志消息"/>
      <el-table-column prop="status" label="执行状态">
        <template #default="scope">
          <dict-tag :options="enumToArray(jobExecuteStatusList)" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="执行时间" width="180"/>
      <el-table-column fixed="right" label="操作" width="200px">
        <template #default="scope">
          <el-button class="ml-2" type="primary" link @click="handleDetail(scope.row)"
                     v-hasPermission="['system:task_log:detail']">详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryForm.pageNo"
        v-model:limit="queryForm.pageSize"
        @pagination="getList"/>

    <sys-job-log-detail-form ref="sysJobLogDetailFormRef" @success="getList"/>
  </div>
</template>

<style scoped lang="scss">

</style>
